<template>
	<view>
		<!-- <view class="top">
			<view class="title">修改密码</view>
		</view> -->
		<view class="con">
			<view class="list">
				<view class="title">获取验证码</view>
				<view class="box1">
					<input type="text" class="input" v-model="smscode" placeholder="输入验证码" />
					<u-button type="success" :ripple="true" @click="getCode" class="code_but">{{tips}}</u-button>
				</view>
			</view>
			<view class="list">
				<view class="title">输入新密码</view>
				<view class="box">
					<input type="text" password="" class="input" value="" v-model="password" placeholder="输入新密码" />
				</view>
			</view>
			<view class="list">
				<view class="title">再次确认密码</view>
				<view class="box">
					<input type="text" password="" class="input" value="" v-model="password_qr" placeholder="再次输入新密码" />
				</view>
			</view>
		</view>
		<view class="button">
			<u-button @click="uploadIcon" class="u-button" :ripple="true" :hairLine="false" type="primary">确认提交</u-button>
		</view>
		<u-keyboard mode="number" :safe-area-inset-bottom="true" v-model="show" :mask="true" :mask-close-able="false"
		 :dot-enabled="false" @change="onChange" @backspace="onBackspace">
		</u-keyboard>
		<u-verification-code :keep-running="true" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>


<script>
	var than;
	export default {
		data() {
			return {
				show: false,
				password: '',
				password_qr: '',
				type: 0,
				smscode: "",
				tips: '',
			}
		},
		onLoad(option) {
			than = this;
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					this.$refs.uCode.start();
					than.post("api/user/getLoginPasswordSmsCode", null, function(data) {})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			uploadIcon() {
				if (!than.password) {
					than.toast("未填写密码")
					return false
				}
				if (than.password != than.password_qr) {
					than.toast("两次密码不同")
					return false
				}
				than.post("api/user/updateLoginPassword", {
					password: than.password,
					smscode: than.smscode
				}, function(data) {
					than.toast(data)
					setTimeout(function() {
						uni.navigateBack()
					}, 1500);
				})
			},
		}
	}
</script>

<style lang="less">
	.top {
		padding: 20rpx 50rpx 0rpx 50rpx;

		.title {
			font-size: 52rpx;
			font-weight: bold;
			color: #3F3F3F;
			margin-bottom: 50rpx;
		}
	}

	.con {
		margin-top: 50rpx;

		.list {
			margin-top: 40rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				padding: 0rpx 50rpx;
			}

			.box {
				margin-top: 20rpx;
				padding: 0 50rpx;

				.input {
					height: 100rpx;
					// background: #FAFAFA;
					border-radius: 20rpx;
					font-size: 32rpx;
					font-weight: bold;
					flex: 1;
					padding-left: 20rpx;				
					border: 2rpx solid #DCDCDC;
				}
			}

			.box1 {
				margin-top: 30rpx;
				display: flex;
				padding: 0rpx 50rpx;

				.input {
					height: 100rpx;
					// border: 1px solid #8E8E8E;
					background: #FAFAFA;
					border-radius: 20px;
					font-size: 32rpx;
					font-weight: bold;
					flex: 1;
					padding-left: 20rpx;
				}

				.code_but {
					margin-left: 20rpx;
					height: 100rpx;
					background: #FDF4ED;
					border-radius: 20rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #FB683D;
					line-height: 100rpx;
					text-align: center;
				}
			}
		}
	}

	.button {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 91rpx;

		.u-button {
			// border: 0;
			// width: 314rpx;
			// height: 80rpx;
			// background: #FEC31D;
			// box-shadow: 0px 6px 8px 0px rgba(170, 170, 170, 0.16);
			// border-radius: 40rpx;
			border: 0;
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			border-radius: 20rpx;
		}
	}
</style>
